<template>
<div class="blogs">
  <UiCard v-for="(blog, index) in blogs" class="card">
    <img class="blog_img" :src="`https://api.ixiaowai.cn/api/api.php?${blog?.id}`" alt="">
    <a class="blog_title" :href="`/blog/${blog?.id}`">{{blog?.title}}</a>
    <p class="blog_details">{{blog?.markdown}}</p>
    <p class="blog_info">
      <span><font-awesome-icon :icon="['far', 'heart']" /> ({{blog?.likeCount}})</span>
      <span><font-awesome-icon :icon="['far', 'comment-alt']" /> ({{blog?.replyCount}})
      </span>
      <span><font-awesome-icon :icon="['far', 'clock']" /> {{blog?.createTime}}</span>
    </p>
  </UiCard>
  <Copyright />
</div>
</template>

<script setup>
import UiCard from "../../components/ui/UiCard.vue";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import Copyright from "../../components/commons/Copyright.vue";

const blogs = ref()

const getAllBlogs = async () => {
  let result = (await axios.get('/api/blog'))?.data
  if (result?.code === 0) {
    blogs.value = result?.object
    return
  }
  ElMessage.error({
    message: result?.msg
  })
}

onMounted(async () => {
  await getAllBlogs()
})
</script>

<style scoped>
.blogs {
  min-height: calc(100vh - 40px);
  padding: 20px;
  background-color: #f2f2f2;
}

.card {
  margin: 20px;
}

.blog_details {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size: 15px;
  color: #999999;
}

.blog_title {
  display: block;
  color: #000000;
  margin-top: 20px;
  font-size: 19px;
  text-decoration: none;
}

.blog_img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.blog_info {
  color: #999999;
  font-size: 17px;
}

.blog_info span {
  margin-right: 10px;
}
</style>